<template>
    <div class="content">
        <div class="register-page">
            <van-nav-bar title="用户注册" left-arrow @click-left="router.back()" />

            <van-form @submit="handleSubmit" class="register-form">
                <!-- 用户名 -->
                <van-field v-model="form.username" name="username" label="用户名" placeholder="请输入用户名"
                    :rules="[{ required: true, message: '请填写用户名' }]" />

                <!-- 邮箱 -->
                <van-field v-model="form.email" name="email" label="邮箱" placeholder="请输入邮箱" :rules="[
                    { required: true, message: '请填写邮箱' },
                    { validator: validateEmail, message: '邮箱格式不正确' }
                ]" />

                <!-- 验证码 -->
                <van-field v-model="form.verificationCode" center clearable label="验证码" placeholder="请输入验证码"
                    :rules="[{ required: true, message: '请填写验证码' }]">
                    <template #button>
                        <van-button size="small" :type="countdown > 0 ? 'default' : 'primary'"
                            :disabled="countdown > 0 || !form.email" @click="sendVerificationCode">
                            {{ countdown > 0 ? `${countdown}秒后重试` : '获取验证码' }}
                        </van-button>
                    </template>
                </van-field>

                <!-- 密码 -->
                <van-field v-model="form.password" name="password" label="密码" placeholder="请输入密码"
                    :type="showPassword ? 'text' : 'password'" :rules="[
                        { required: true, message: '请填写密码' },
                        { validator: validatePassword, message: '密码需6-20位字母数字组合' }
                    ]">
                    <template #right-icon>
                        <van-icon :name="showPassword ? 'eye-o' : 'closed-eye'" @click="showPassword = !showPassword" />
                    </template>
                </van-field>

                <!-- 提交按钮 -->
                <div style="margin: 16px;">
                    <van-button round block type="primary" native-type="submit">
                        注册
                    </van-button>
                </div>
            </van-form>
        </div>
    </div>

</template>

<script setup>
import { ref, reactive } from 'vue';
import { useRouter } from 'vue-router';
import { showToast, showSuccessToast, showFailToast } from 'vant';
import { validateEmail as validateEmailUtil } from '@/utils/validate';
const router = useRouter();

// 表单数据
const form = reactive({
    username: '',
    email: '',
    verificationCode: '',
    password: ''
});

// 密码可见性
const showPassword = ref(false);

// 验证码倒计时
const countdown = ref(0);
let countdownTimer = null;

// 邮箱验证
const validateEmail = (val) => validateEmailUtil(val);

// 密码验证（6-20位字母数字组合）
const validatePassword = (val) => /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,20}$/.test(val);

// 发送验证码
const sendVerificationCode = () => {
    if (!validateEmail(form.email)) {
        showFailToast('邮箱格式不正确');
        return;
    }

    // 模拟发送验证码请求
    showToast('发送中...');

    // 模拟API请求
    setTimeout(() => {
        // 开始倒计时
        countdown.value = 60;
        countdownTimer = setInterval(() => {
            countdown.value--;
            if (countdown.value <= 0) {
                clearInterval(countdownTimer);
            }
        }, 1000);

        showSuccessToast('验证码已发送');
    }, 1000);
};

// 表单提交
const handleSubmit = () => {
    // 这里添加实际注册逻辑
    console.log('注册信息:', form);

    // 模拟注册请求
    showToast('注册中...');

    setTimeout(() => {
        showSuccessToast('注册成功');
        // 注册成功后跳转到登录页
        router.push('/login');
    }, 1500);
};

// 组件卸载时清除定时器
onBeforeUnmount(() => {
    if (countdownTimer) clearInterval(countdownTimer);
});
</script>

<style scoped>
*{
    margin: 0px;
    padding: 0px;
}
.content{
    height: 100vh;
    background: url(../assets/bg.jpg) no-repeat center;
    background-size: 100% 100%;
  padding-top: 0px;
}
.register-page {
    height: 100vh;
    background-color: #f7f8fa;
}

.register-form {
    margin-top: 20px;
}

.van-field {
    margin-bottom: 10px;
}

:deep(.van-field__label) {
    width: 70px;
}
</style>